<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>私产交易要件</title>
  </head>
  <style type="text/css">
    body {
      margin: 0;
      padding: 2rem;
      font-size: 1rem;
    }

    select {
      border-radius: 5px;
      margin-bottom: 1rem;
      width: 100%;
      padding: 1rem;
      box-sizing: border-box;
    }

    .title {
      margin-bottom: 1rem;
    }

    .btnSubmit {
      padding: 1rem;
      margin-top: 2rem;
      background-color: #f03131;
      color: #ffffff;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
    }

    .tips {
      display: none;
      position: absolute;
      left: 2rem;
      right: 2rem;
      top: 2rem;
      border: 1px solid #ffd7a8;
      padding: 1.5rem;
      border-radius: 5px;
      background: #fff8f0;
      box-shadow: 0 0 60px #999;
    }
    .close {
      position: absolute;
      right: 1rem;
      top: 1rem;
    }
    .close2 {
      display: block;
      width: 50%;
      margin: 2rem auto 0;
      padding: 1rem;
      background: #f03131;
      border-radius: 5px;
      color: #ffffff;
      text-align: center;
    }
  </style>

  <body>
    <h1>私产交易要件</h1>
    <div class="dialog">
      <div class="question">
        <div id="typeTitle" class="title">加载中...</div>
        <select class="type-select"></select>
      </div>
      <!--户籍  -->
      <div style="display: none" class="house">
        <div id="houseTitle" class="title">加载中...</div>
        <select class="house-select"></select>
      </div>
      <!--买房、卖方  -->
      <div style="display: none" class="buyer">
        <div id="buyerTitle" class="title">加载中...</div>
        <select class="buyer-select"></select>
      </div>
      <!--卖方-出售房屋 买房-出售房屋 -->
      <div style="display: none" class="sell">
        <div id="sellTitle" class="title">加载中...</div>
        <select class="sell-select"></select>
      </div>
      <!--买方-出售房屋-婚姻状况 -->
      <div style="display: none" class="marital">
        <div id="maritalTitle" class="title">加载中...</div>
        <select class="marital-select"></select>
      </div>
      <div class="btn">
        <div class="btnSubmit">提交</div>
      </div>
    </div>
    <div class="tips">
      <h2 class="tips-title"></h2>
      <span class="close">关闭</span>
      <div class="message"></div>
      <div class="list"></div>
      <span class="close2">关闭</span>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
      var baseUrl = "https:///rhtm.jfzh.com.cn/";
      var result = null;
      var nextResult = null;
      var nextResult1 = null;
      var buyerResult = null;
      var maritalResult = null;
      var lastResult = null;
      var answers = null;
      var type = null; //1 获取户籍信息、2获取买房、卖方信息 3.获取婚姻状况或者销售状态 4.获取婚姻状况
      var isShow = false;
      var tipsTitle = "";
      var submitDate = {
        customerId: null,
        type: null,
        optionIds: null,
      };
      $(document).ready(function () {
        option();
      });
      $(".close,.close2").click(function () {
        $(".tips").hide();
      });
      // 提交
      $(".btnSubmit").click(function () {
        submitDate.customerId = "o5GGA4l0AUEJsehIzQcsjng__ReM";
        submitDate.type = "privateProperty";
        if (isShow == true || type == null) {
          alert("您还没有选择信息");
        } else {
          if (submitDate.optionIds == "") {
            submitDate.optionIds = [];
          } else {
            submitDate.optionIds = submitDate.optionIds.split(",");
          }
          $.ajax({
            contentType: "application/json",
            type: "post",
            url: baseUrl + "mini/answer/optionSubmit",
            cache: false,
            data: JSON.stringify(submitDate),
            dataType: "json",
            async: false,
            success: function (data) {
              var result = data.data;
              // $('.dialog').css('display','none');
              $(".tips").show();
              $(".tips-title").html(tipsTitle);
              var html = "";
              result.conclusionResultItemLists.forEach(function (el) {
                html += `
                                    <p>${el.conclusion}</p>
                                `;
              });
              $(".message").html(html);
              $(".list").html(
                "以上要件作为参考，一律以办理手续前通知您所需的要件为准。"
              );
            },
          });
        }
      });
      $(".marital-select").change(function (event) {
        var oid = this.options[this.options.selectedIndex].value;
        if (oid == "请选择") {
          isShow = true;
        } else {
          lastResult.optionList.forEach(function (el) {
            if (oid == el.id) {
              var hassub = el.hasSub;
              if (hassub == true) {
                isShow = true;
              } else {
                isShow = false;
                submitDate.optionIds = el.id;
              }
            }
          });
        }
      });
      // 选择销售状态获取婚姻状态
      $(".sell-select").change(function (event) {
        type = 4;
        var oid = this.options[this.options.selectedIndex].value;
        if (oid == "请选择") {
          $(".marital").css("display", "none");
          submitDate.optionIds = "";
        } else {
          $(".marital").css("display", "block");
          maritalResult.optionList.forEach(function (el) {
            if (oid == el.id) {
              var hassub = el.hasSub;
              if (hassub == true) {
                isShow = true;
                submitDate.optionIds = "";
                nextSelect(oid);
                $(".marital").css("display", "block");
              } else {
                isShow = false;
                submitDate.optionIds = el.id;
                $(".marital").css("display", "none");
              }
            }
          });
        }
      });

      // 选择买房/卖方获取婚姻状况或者销售状态
      $(".buyer-select").change(function (event) {
        console.log($(this).val());
        if ($(this).val() == "o155" || $(this).val() == "o143") {
          tipsTitle = "您作为卖方，需要提供下述证件";
        } else {
          tipsTitle = "您作为买方，需要提供下述证件";
        }
        type = 3;
        var oid = this.options[this.options.selectedIndex].value;
        if (oid == "请选择") {
          $(".sell").css("display", "none");
          $(".marital").css("display", "none");
          submitDate.optionIds = "";
        } else {
          $(".sell").css("display", "block");
          $(".sell-select  option[value='请选择'] ").attr("selected", true);
          $(".marital").css("display", "none");
          buyerResult.optionList.forEach(function (el) {
            if (oid == el.id) {
              var hassub = el.hasSub;
              if (hassub == true) {
                isShow = true;
                submitDate.optionIds = "";
                nextSelect(oid);
                $(".sell").css("display", "block");
              } else {
                isShow = false;
                submitDate.optionIds = el.id;
                $(".sell").css("display", "none");
              }
            }
          });
        }
      });
      // 选择户籍获取买房/卖方信息
      $(".house-select").change(function (event) {
        type = 2;
        var oid = this.options[this.options.selectedIndex].value;
        // var hassub = null
        if (oid == "请选择") {
          $(".buyer").css("display", "none");
          $(".sell").css("display", "none");
          $(".marital").css("display", "none");
          submitDate.optionIds = "";
        } else {
          $(".buyer").css("display", "block");
          $(".buyer-select  option[value='请选择'] ").attr("selected", true);
          $(".sell").css("display", "none");
          $(".marital").css("display", "none");

          nextResult1.optionList.forEach(function (el) {
            if (oid == el.id) {
              var hassub = el.hasSub;
              if (hassub == true) {
                isShow = true;
                submitDate.optionIds = "";
                nextSelect(oid);
                $(".buyer").css("display", "block");
              } else {
                isShow = false;
                submitDate.optionIds = el.id;
                $(".buyer").css("display", "none");
              }
            }
          });
        }
      });
      //交易类型
      $(".type-select").change(function (event) {
        type = 1;
        var oid = this.options[this.options.selectedIndex].value;
        var hassub = null;
        if (oid == "请选择") {
          $(".house").css("display", "none");
          $(".buyer").css("display", "none");
          $(".sell").css("display", "none");
          $(".marital").css("display", "none");
          submitDate.optionIds = "";
        } else {
          $(".house").css("display", "block");
          $(".house-select  option[value='请选择'] ").attr("selected", true);
          $(".buyer").css("display", "none");
          $(".sell").css("display", "none");
          $(".marital").css("display", "none");
          result.optionList.forEach(function (el) {
            if (oid == el.id) {
              hassub = el.hasSub;
              if (hassub == true) {
                isShow = true;
                submitDate.optionIds = "";
                nextSelect(oid);
                $(".house").css("display", "block");
              } else {
                isShow = false;
                submitDate.optionIds = el.id;
                $(".house").css("display", "none");
              }
            }
          });
        }
      });

      function nextSelect(val) {
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: baseUrl + "mini/question/getOptionQuestion?oid=" + val,
          cache: false,
          dataType: "json",
          async: false,
          success: function (data) {
            var html = "";
            if (type == 1) {
              // nextResult = data.data[0]
              nextResult1 = data.data[0];
              $("#houseTitle").html(nextResult1.title);
              html += `
                                <option value='请选择'>请选择</option>
                            `;
              nextResult1.optionList.forEach(function (el) {
                html += `
                                    <option value='${el.id}' hassub='${el.hasSub}'>${el.title}</option>
                                `;
              });
              $(".house-select").html(html);
            } else if (type == 2) {
              buyerResult = data.data[0];
              $("#buyerTitle").html(buyerResult.title);
              html += `
                                <option value='请选择'>请选择</option>
                            `;
              buyerResult.optionList.forEach(function (el) {
                html += `
                                    <option value='${el.id}' hassub='${el.hasSub}'>${el.title}</option>
                                `;
              });
              $(".buyer-select").html(html);
            } else if (type == 3) {
              nextResult = data.data[0];
              maritalResult = data.data[0];
              $("#sellTitle").html(nextResult.title);
              html += `
                                <option value='请选择'>请选择</option>
                            `;
              nextResult.optionList.forEach(function (el) {
                html += `
                                    <option value='${el.id}' hassub='${el.hasSub}'>${el.title}</option>
                                `;
              });
              $(".sell-select").html(html);
            } else if (type == 4) {
              var result = data.data[0];
              lastResult = data.data[0];
              $("#maritalTitle").html(result.title);
              html += `
                                <option value='请选择'>请选择</option>
                            `;
              result.optionList.forEach(function (el) {
                html += `
                                    <option value='${el.id}' hassub='${el.hasSub}'>${el.title}</option>
                                `;
              });
              $(".marital-select").html(html);
            }
          },
        });
      }

      function option() {
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: baseUrl + "mini/question/list?type=privateProperty",
          cache: false,
          dataType: "json",
          async: false,
          success: function (data) {
            result = data.data[0];
            $("#typeTitle").html(result.title);
            $(".type-select").append("<option value='请选择'>请选择</option>");
            for (var i in result.optionList) {
              $(".type-select").append(
                "<option value='" +
                  result.optionList[i].id +
                  "' hassub='" +
                  result.optionList[i].hasSub +
                  "'>" +
                  result.optionList[i].title +
                  "</option>"
              );
            }
          },
        });
        return result;
      }
    </script>
  </body>
</html>
